<template>
  <div class="index-class-bpx-style">
    <el-container>
      <el-header height="auto" style="padding: 0">
        <!--头部组件-->
        <TopComponent />
      </el-header>
      <el-main style="padding: 0">
        <el-button @click="editTemp" v-if="!isDraggable">编辑布局</el-button>
        <div style="overflow: auto;">
          <girdLayout :layout="layoutList" @clickTemp="clickTemplate" :isDraggable="isDraggable" @draggable="draggable"></girdLayout>
        </div>
      </el-main>
      <el-footer style="padding: 0;">
        <div style="background-color: #004D8C;padding: 20px 0;margin-top: 10px;color: #fff;font-size: 14px;text-align: center;">
          <div style="display: flex;align-items: center;justify-content: center;">
            Copyright © 2000-2024 内蒙古和利管理咨询集团有限公司 版权所有
<!--            <img style="margin: 0 5px 0 10px" :src="require('@/assets/images/gh.png')" alt="">-->
            <el-link href="https://beian.miit.gov.cn/#/Integrated/recordQuery" target="_blank">
              <span style="color: #96a0aa">
              蒙ICP备17000595号-3
            </span>
            </el-link>
          </div>
        </div>

      </el-footer>
    </el-container>
  </div>
</template>

<script setup lang="ts" name="homePage">
import {defineAsyncComponent, h, onMounted, reactive, ref, toRefs, watch} from "vue";
const TopComponent = defineAsyncComponent(() => import('@/views/homePage/components/TopComponent.vue'));
import RenderVnode from './renderVnode'
import girdLayout from '@/components/girdLayout/index.vue'
import {getAllDefaultTem} from "@/api/portal/componentHub";
import {Session} from "@/utils/storage";
import {Key} from "@/stores/auth";

const layoutList = ref([])
function clickTemplate(val: any) { // 点击模板显示
  layoutList.value = val
}

const isDraggable = ref(false)
function draggable(val: any) { // 是否可以拖拽
  isDraggable.value = val
}

function editTemp(){
  isDraggable.value = !isDraggable.value
}
onMounted(() => {
  getAllDefaultTem().then(res => {
    layoutList.value = JSON.parse(res.data.layout).layout
    console.log(JSON.parse(res.data.layout).umdUrl,'JSON.parse(res.data.layout).umdUrl')
    Session.set('umdUrl', JSON.parse(res.data.layout).umdUrl);
  })
})
// import TopComponent from "@/views/homepage/components/TopComponent.vue";
// import RightContent from "./components/rightContent.vue";
// import leftContent from "./components/leftContent.vue";
// import MyCardIndex from '@/components/Breadcrumb/MyCardIndex.vue';
// import {selectTopMenuAPI} from "@/api/homepage/TopComponent/TopComponent";
// import { routerMixin } from '@/mixin/routerMixin'
// export default {
//   mixins: [routerMixin],
//   components: {
//     TopComponent,
//     RightContent,
//     leftContent,
//     MyCardIndex
//   },
//   data(){
//     return {
//       levelList: [],
//     }
//   },
//   created() {
//     this.getModules();
//   },
//   methods:{
//     // 获取模块
//     getModules() {
//       this.levelList = [];
//       selectTopMenuAPI().then(res => {
//         // 判断是否是可以看到系统管理
//         res.rows.forEach(item => {
//           if(item.notShow){
//             // 删除这一项
//             res.rows.splice(res.rows.indexOf(item), 1)
//           }
//         })
//         this.levelList = res.rows
//         // 修改路由的 path
//         this.afreshSetPath(this.levelList);
//         // console.log('this.levelList ==>', this.levelList)

//       })
//     },

//   }
// }
</script>

<style scoped lang="scss">
.index-class-bpx-style {
  display: flex;
  flex-direction: column;
  background: #FFFFFF;
  width: 100%;
  //height: 100%;
  //overflow: hidden;

  .mainbox {
    display: flex;
    width: 98%;
    height: 911px;
    background: rgba(245, 245, 253, 1);
    margin: 0 20px 21px 20px;

    .column {
      width: 354px;
      background:  #FFFFFF;
      border-radius: 15px;
      height: calc(100vh - 133px);
    }

    .column:nth-child(2) {
      flex: 8;
      background: rgba(245, 245, 253, 1);
      margin-left: 20px;
    }
  }
}
</style>

